<template>
  <PageWrapper title="房间管理">
    <TableForm :roomTypeOpts="roomTypeOpts" @confirm="onTableFormConfirm" @reset="onTableFormReset" />
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" :icon="h(PlusOutlined)" @click="onAddRoomEvent"> 新增房间 </a-button>
      </template>
      <template #action="{ record }">
        <TableAction
        :actions="[
          {
            label: '编辑',
            onClick: onTableEdit.bind(null, record)
          },
          {
            label: record.status == '0' ? '启用' : '停用',
            color: record.status == '0' ? 'success' : 'warning',
            onClick: onTableStop.bind(null, record)
          },
          {
            label: '删除',
            color: 'error',
            onClick: onTableDel.bind(null, record)
          }
        ]"
        />
      </template>
      <template #status="{ text: status }">
        <Tag :color="status == '0' ? 'orange' : 'green'">
          {{  status == '0' ? '未启用' : '启用'  }}
        </Tag>
      </template>
      <template #type="{ text: type }">
        <Tag :color="getTagColor(type)">
          {{ getTypeNameByCode(type) }}
        </Tag>
      </template>
    </BasicTable>

    <AddRoomModal :roomTypeOpts="roomTypeOpts" @register="register" @confirm="onModalConfirm" />
  </PageWrapper>
</template>


<script lang="ts" setup>
import { h } from 'vue'
import { get } from 'lodash-es'
import { PlusOutlined } from '@ant-design/icons-vue'
import { PageWrapper } from '@/components/Page'
import { useModal } from '@/components/Modal'
import { BasicTable, useTable, TableAction } from '@/components/Table'
import { tableColumns, roomTypeColors } from './settings'
import { useRequest } from '@vben/hooks'
import * as api from '@/api/roomManage'
import { Tag } from 'ant-design-vue'
import AddRoomModal from './AddRoomModal.vue'
import { AddRoomParams } from '@/api/roomManage/model'
import { useMessage } from '@/hooks/web/useMessage'
import TableForm from './TableForm.vue'
import { getDictOpts } from '@/api/dictionary'
import { ROOM_TYPE_OPTION_CODE } from '@/settings'

const [register, { openModal, closeModal }] = useModal()

const { data: tableList, loading, refresh, runAsync } = useRequest(api.getRoomList);
const { data: roomTypeOpts, loading: dictOptLoading } = useRequest(() => getDictOpts(ROOM_TYPE_OPTION_CODE))

const [registerTable] = useTable({
  columns: tableColumns,
  dataSource: tableList,
  loading: loading || dictOptLoading,
  actionColumn: {
    width: 160,
    title: "操作",
    dataIndex: 'action',
    slots: { customRender: 'action' }
  }
});

function onAddRoomEvent() {
  openModal(true, { modalType: 'add' })
}

/** 表格编辑 */
function onTableEdit(e: AddRoomParams) {
  openModal(true, {...e, modalType: 'edit'});
}

/** 表格删除 */
function onTableDel(e: AddRoomParams) {
  useMessage().createConfirm({
    title: '提示',
    content: '确认删除该房间？',
    iconType: 'warning',
    onOk: async () => {
      const id = e.id;
      if (id) {
        await api.deleteRoom(id);
        useMessage().createMessage.success('删除成功');
        refresh();
      }
    }
  })
}

function onTableStop(e: AddRoomParams) {
  const text = e.status == '0' ? '启用' : '停用';
  useMessage().createConfirm({
    title: '提示',
    content: `确认${text}该房间？`,
    iconType: 'warning',
    onOk: async () => {
      const id = e.id;
      if (id) {
        const status = e.status == '0' ? '1' : '0';
        await api.editRoomStatus(id, status);
        useMessage().createMessage.success(`${text}房间成功!`);
        refresh();
      }
    }
  })
}

/** 获取房间类型名字 */
function getTypeNameByCode(code: string) {
  const target = (roomTypeOpts.value || []).find(item => item.value == code);
  return get(target, 'label', '--')
}

function getTagColor(code: string) {
  const targetIndex = (roomTypeOpts.value || []).findIndex(item => item.value == code);
  return roomTypeColors[targetIndex]
}

/** 新增房间提交 */
async function onModalConfirm() {
  closeModal();
  useMessage().createMessage.success('操作成功!');
  refresh();
}

function onTableFormConfirm({ status, type }: { status: string, type: string }) {
  runAsync(type, status);
}

function onTableFormReset() {
  runAsync();
}

</script>

<style lang="less" scoped>
::v-deep(.vben-basic-table-header__toolbar) {
  justify-content: flex-start;
}
</style>